<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="display: flex;flex-direction: row">
    <div><div>div111</div><div>div222</div></div><div><div>div333</div><div>div444</div></div>
</div>

<div style="display: flex" class="cont">
    <div class="sub">111</div>
    <div class="sub">111</div>
    <div class="sub">111</div>
    <span>
        <div class="sub">222</div>
    </span>
    <div class="sub">111</div>
    <div class="sub">111</div>


    <button onclick="funcbttn()">ttt</button>

</div>
<br/>
sdfsd:
<input type="text" value="sss" id="theInput">
</body>
</html>
<script>

    function eventproc1(e){
        e.preventDefault();
        console.log("event1,",e);
    }
    function eventproc2(e){
        console.log("event2,",e);
        e.stopPropagation();
    }

    function eventproc3(e){
        console.log("event3,",e);
    }
    function funcbttn(){
        console.log("funcbttn");
        document.removeEventListener("keyup",eventproc1);
        document.addEventListener("keyup",eventproc3)
    }
    function mytest1() {
        console.log('document', new Date())
        // console.log('document', document.querySelector('body'))
        // alert(document.getElementById("my2"));
        // console.time()

        // document.addEventListener("keyup",eventproc1,false);
        document.addEventListener("keyup",eventproc1);
        // document.addEventListener("keyup",eventproc1);
        // document.addEventListener("keyup",eventproc2);
        // document.querySelector("#theInput").addEventListener("keyup",eventproc2,false);
        document.querySelector("#theInput").addEventListener("keyup",eventproc2);
        document.querySelector("#theInput").addEventListener("keyup",(event)=>{event.preventDefault()});
    }
    document.onLoad = mytest1();

    function mytest2() {
        console.log('body', new Date())
        console.log('body', document.querySelector('body'))
        console.log('body img', document.querySelector('img'))
        console.timeEnd()
        console.time()
        // alert(document.getElementById("my2"));
    }
    function mytest3() {
        console.log('img', new Date())
        console.log('img', document.querySelector('img'))
        console.timeEnd()
        // alert(document.getElementById("my2"));
    }
</script>
<style>
.cont .sub{
    border: 1px solid;
    margin-left: 3px;
}
.cont .sub:not(:first-of-type):not(:last-of-type){
    background-color: pink;
}
.cont .sub:first-of-type{
    background-color: paleturquoise;
}
</style>